<template>
  <div class="page">
    <navigation>{{ $t('订单详情') }}</navigation>
    <div v-if="info" class="detail-wrap">
      <orderNotify :status="info.order.status" :phone="info.seller.mobile_phone" :time="info.order.order_time"></orderNotify>
      <div class="info01 bgc-white">
        <div class="item">
          <div v-if="info.order.side===2" class="left">{{ $t('我要买') }}</div>
          <div v-else-if="info.order.side===1" class="left">{{ $t('我要卖') }}</div>
          <div class="right">{{ info.order.amount }}</div>
        </div>
        <div class="item">
          <div class="left">{{ $t('单价') }}</div>
          <div class="right">￥{{ info.order.price_usd }}</div>
        </div>
        <div class="item">
          <div class="left">{{ $t('总价') }}</div>
          <div class="right">￥{{ info.order.total_price_usd }}</div>
        </div>
        <div class="item">
          <div class="left">{{ $t('实付') }}</div>
          <div class="right">￥{{ info.order.total_price_usd }}</div>
        </div>
      </div>
      <div class="info01 bgc-white">
        <div class="item">
          <div class="left">{{ $t('订单编号') }}：<span>{{ info.order.order_id }}</span></div>
          <div class="right">{{ info.order.order_time }}</div>
        </div>
        <div class="item">
          <div class="left">{{ $t('验证交易员') }}：<span>{{ info.buyer.nickname }}</span></div>
          <div class="right"></div>
        </div>
        <div v-if="sellerCard">
          <div v-if="sellerCard.proceeds_type === 'bank'" class="item">
            <div class="left">{{ $t('户主') }}：<span>{{ sellerCard.username }}</span></div>
            <div class="right"></div>
          </div>
          <div v-if="sellerCard.proceeds_type === 'bank'" class="item">
            <div class="left">{{ $t('开户行') }}：<span>{{ sellerCard.bank_name }}</span></div>
            <div class="right"></div>
          </div>
          <div class="item">
            <div class="left">{{ $t('收款账号') }}：<span>{{ sellerCard.account }}</span></div>
            <div class="right"></div>
          </div>
          <div v-if="sellerCard.proceeds_type !== 'bank'" class="item">
            <div class="left">{{ $t(sellerCard.proceeds.name) }} {{ $t('收款码') }}：</div>
            <button
              v-show="!showCode"
              class="right"
              @click="showCode=true"
            >
              {{ $t('展开') }}
            </button>
            <button
              v-show="showCode"
              class="right"
              @click="showCode=false"
            >
              {{ $t('收起') }}
            </button>
          </div>
          <div
            v-show="showCode"
            class="pic01"
          >
            <img
              :src="sellerCard.qrcode"
              alt=""
            >
          </div>
        </div>
      </div>
      <dl v-if="info.order.side==2" class="info02">
        <dt @click="showInfo = !showInfo">{{ $t('查看卖家实名信息') }} <i class="iconfont icon-sanjiao"></i></dt>
        <dd v-show="showInfo" class="info01">
          <div class="item">
            <div class="left">{{ $t('实名') }}：<span>{{ info.seller.real_name }}</span></div>
            <div class="right"></div>
          </div>
          <div class="item">
            <div class="left">{{ $t('手机号') }}：<span>{{ info.seller.mobile_phone }}</span></div>
            <div class="right"></div>
          </div>
        </dd>
      </dl>
      <dl v-else-if="info.order.side==1" class="info02">
        <dt @click="showInfo = !showInfo">{{ $t('查看买家实名信息') }} <i class="iconfont icon-sanjiao"></i></dt>
        <dd v-show="showInfo" class="info01">
          <div class="item">
            <div class="left">{{ $t('实名') }}：<span>{{ info.buyer.real_name }}</span></div>
            <div class="right"></div>
          </div>
          <div class="item">
            <div class="left">{{ $t('手机号') }}：<span>{{ info.buyer.mobile_phone }}</span></div>
            <div class="right"></div>
          </div>
        </dd>
      </dl>
      <dl class="info02">
        <dt @click="showPeyment = !showPeyment">{{ $t('查看交易员其他收款方式') }} <i class="iconfont icon-sanjiao"></i></dt>
        <dd v-show="showPeyment" v-if="info.seller_cards.length > 0" class="info01">
          <div v-for="(item, index) in info.seller_cards" :key="item.account" class="item" @click="cardsIndex = index">
            <div class="left">{{ $t(item.proceeds.name) }}</div>
            <div class="right"><i v-show="cardsIndex == index" class="iconfont icon-duigou"></i></div>
          </div>
        </dd>
        <dd v-show="showPeyment" v-else class="info01">
          <div class="item">注：收款方式已缺失</div>
        </dd>
      </dl>
      <div v-if="info.order.status === '2' && info.order.side === 2" class="btns">
        <button class="btn s1" @click="handleDelOrder(info.order.order_id)">{{ $t('取消订单') }}</button>
        <button class="btn" @click="paymentOrder(info.order.order_id)">{{ $t('已付款') }}</button>
      </div>
      <div v-if="info.order.status === '3' && info.order.side === 1" class="btns">
        <button class="btn s1" @click="handleDeal(info.order.order_id)">{{ $t('放币') }}</button>
      </div>
      <div v-if="info.order.status==='1'" class="btns">
        <nuxt-link :to="'order-appeal?orderid='+info.order.order_id" class="btn s1">{{ $t('申诉') }}</nuxt-link>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import { Indicator } from 'mint-ui'
import navigation from '@/components/Navigation'
import orderNotify from '@/components/partials/otc/order-detail/OrderNotify'
export default {
  components: { navigation, orderNotify },
  data () {
    return {
      showCode: false,
      showInfo: false,
      showPeyment: false,
      info: null,
      cardsIndex: 0
    }
  },
  computed: {
    sellerCard () {
      return this.info.seller_cards[this.cardsIndex]
    }
  },
  beforeMount () {
    Indicator.open()
    this.otcOrderDetail({ order_id: this.$route.query.order_id })
      .then((data) => {
        this.info = data.data
      })
      .finally(() => {
        Indicator.close()
      })
  },
  methods: {
    ...mapActions({
      otcOrderDetail: 'otc/otcOrderDetail',
      delOrder: 'otc/delOrder',
      payOrder: 'otc/payOrder',
      makeDeal: 'otc/makeDeal'
    }),
    handleDelOrder (id) {
      this.$toast.show(this.$t('确定取消此订单吗？'), {
        action: {
          text: this.$t('确认'),
          onClick: () => {
            const succeed = (data) => {
              this.otcOrderDetail({ order_id: data.data.order_id })
              this.$toast.success('取消成功')
            }
            const failed = (error) => {
              this.$toast.error(error.message)
            }
            const payload = {
              order_id: id
            }
            this.delOrder(payload)
              .then(succeed)
              .catch(failed)
          }
        }
      })
    },
    paymentOrder (id) {
      this.$toast.show(this.$t('确定支付此订单？'), {
        action: {
          text: this.$t('确认'),
          onClick: () => {
            const succeed = (data) => {
              this.otcOrderDetail({ order_id: data.data.order_id })
              this.$toast.success('支付成功')
              this.$router.back()
            }
            const failed = (error) => {
              this.$toast.error(error.message)
            }
            const payload = {
              order_id: id
            }
            this.payOrder(payload)
              .then(succeed)
              .catch(failed)
          }
        }
      })
    },
    handleDeal (orderId) {
      this.$toast.show(this.$t('确认放币吗？'), {
        action: {
          text: this.$t('确认'),
          onClick: () => {
            const succeed = (data) => {
              this.$toast.success(this.$t('放币成功'))
              this.$router.back()
            }
            const failed = (error) => {
              this.$toast.error(error.message)
            }
            const payload = {
              order_id: orderId
            }
            this.makeDeal(payload)
              .then(succeed)
              .catch(failed)
          }
        }
      })
    }
  }
}
</script>
<style scoped>
.page {
  background: #f2f2f2;
  height: calc(100vh - 50px);
  overflow-y: auto;
  background-color: #fff;
}
.bgc-white {
  background-color: #fff;
}
.info01 {
  padding: 10px 15px;
  margin-bottom: 10px;
}
.info01 .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 2;
  min-height: 32px;
}
.info01 .item .right {
  background-color: transparent;
}
.pic01 {
  margin: 10px 0;
}
.pic01 img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
.info02 + .info02 {
  border-top: 1px solid #eee;
}
.info02 dt {
  background: #fff;
  line-height: 40px;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btns {
  padding: 10px 20px;
}
.btns .btn {
  display: block;
  width: 100%;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  margin: 10px 0;
}
.btns .btn.s1 {
  background-color: #1b8afe;
  color: #fff;
}
</style>
